<body>

  <div class="col-sm-10 col-sm-offset-1" style="margin-bottom: 100px;margin-left: 0px;padding-left: 0px;">

    <div class="card wizard-card">
      <!--标头-->
      <div class="wizard-header">
        <h3>
          <b></b> 个人详情页面信息
          <br>
        </h3>
      </div>
      <div class="col-sm-4 col-sm-offset-1">
        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.name" readonly="readonly" placeholder="姓名" name="name" required>
          </label>
        </div>

        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常用电话：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.phone" readonly="readonly" placeholder="电话" name="phone"
              required>
          </label>
        </div>
        <div class="form-group div-hidden">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出生年月：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.birthday" readonly="readonly" placeholder="出生年月" name="address"
              required>
            <!-- <p-calendar [(ngModel)]="personInfo.birthday" dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar> -->
          </label>
        </div>


        <div class="form-group div-hidden">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信号：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.wechat" readonly="readonly" placeholder="微信号" name="wechat"
              required>
          </label>
        </div>
        <div class="form-group">
          <label>进入提高班时间：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.enterDmtTime" readonly="readonly" placeholder="进入提高班时间" name="enterDmtTime"
              required>
            <!-- <p-calendar [(ngModel)]="personInfo.enterDmtTime" dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar> -->
          </label>
        </div>
        <div class="form-group  div-hidden">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;进入大学时间：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.enterCollegeTime" readonly="readonly" placeholder="进入大学时间"
              name="enterCollegeTime" required>
            <!-- <p-calendar [(ngModel)]="personInfo.enterCollegeTime" dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar> -->
          </label>
        </div>
        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</label>
          <label class="form-inline">
            <!-- <select class="form-control" [(ngModel)]="personInfo.provinceNativeId" (change)="changeNativeProvince($event.target.value)"
                        style="float:left" name="province">
                        <option *ngFor="let option of provinceOptions" [value]="option.id">{{option.name}}</option>
                      </select>
          
                      <select class="form-control" [(ngModel)]="personInfo.cityNativeId" (change)="changeNativeCity($event.target.value)" style="float:left"
                        name="city">
                        <option *ngFor="let option of nativeCityOptions" [value]="option.id">{{option.name}}</option>
                      </select>
          
                      <select class="form-control" [(ngModel)]="personInfo.countyOrDistrictNativeId" (change)="changeNativeCountyOrDistrict($event.target.value)"
                        style="float:left" name="countyOrDistrict">
                        <option *ngFor="let option of nativeCountyOrDistrictOptions" [value]="option.id">{{option.name}}</option>
                      </select>-->

            <input type="text" class="form-control" [(ngModel)]="personInfo.nativePlace" readonly="readonly" readonly="readonly" placeholder="籍贯"
              name="address" required>
          </label>
        </div>
        <div class="form-group">
          <label>紧急联系人姓名：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.emergName" readonly="readonly" placeholder="姓名" name="emergName"
              required>
          </label>
        </div>
        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;与自己的关系：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.emergRelationName" style="width: 186px;" readonly="readonly"
              placeholder="与自己的关系" name="emergRelationName" required>
          </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group  div-hidden">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;英文名：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.englishName" readonly="readonly" readonly="readonly" placeholder="英文名"
              name="englishName" required>
          </label>
        </div>
        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期数：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.gradeName" readonly="readonly" placeholder="期数" name="grade"
              required>
            <select class="form-control div-hidden" [(ngModel)]="personInfo.grade" name="grade">
              <option *ngFor="let option of gradeOptions" [value]="option.dictName">{{option.dictName}}</option>
            </select>
          </label>
        </div>
        <div class="form-group ">
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：</label>
            <label>
              <!-- <input type="radio" style="width:50px" [(ngModel)]="personInfo.sex" readonly="readonly" name="sex" value="男">男
                    <input type="radio" style="width:50px" [(ngModel)]="personInfo.sex" readonly="readonly" name="sex" value="女">女 -->
              <input type="text" class="form-control" [(ngModel)]="personInfo.sex" readonly="readonly" placeholder="性别" name="email" required>
            </label>
          </div>
        <div class="form-group  div-hidden">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.email" readonly="readonly" placeholder="邮箱" name="email"
              required>
          </label>
        </div>
        <div class="form-group  div-hidden">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QQ号：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.qq" readonly="readonly" placeholder="QQ号" name="qq" required>
          </label>
        </div>
        <div class="form-group">
          <label>提高班毕业时间：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.graduateDmtTime" readonly="readonly" placeholder="提高班毕业时间"
              name="graduateDmtTime" required>
            <!-- <p-calendar [(ngModel)]="personInfo.graduateDmtTime" dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar> -->
          </label>
        </div>
        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;住所地址：</label>
          <label class="form-inline">
            <!--<select class="form-control" [(ngModel)]="personInfo.provinceId" (change)="changeProvince($event.target.value)" style="float:left"
                      name="province">
                      <option *ngFor="let option of provinceOptions" [value]="option.id">{{option.name}}</option>
                    </select>
                    <select class="form-control" [(ngModel)]="personInfo.cityId" (change)="changeCity($event.target.value)" style="float:left"
                      name="city">
                      <option *ngFor="let option of cityOptions" [value]="option.id">{{option.name}}</option>
                    </select>
                    <select class="form-control" [(ngModel)]="personInfo.countyOrDistrictId" (change)="changeCountyOrDistrict($event.target.value)"
                      style="float:left" name="countyOrDistrict">
                      <option *ngFor="let option of countyOrDistrictOptions" [value]="option.id">{{option.name}}</option>
                    </select>-->
            <input type="text" class="form-control" [(ngModel)]="personInfo.address" readonly="readonly" placeholder="住所地址" name="address"
              required>
          </label>
        </div>
        <div class="form-group">
          <label>紧急联系人电话：</label>
          <label>
            <input type="text" class="form-control" [(ngModel)]="personInfo.emergPhone" readonly="readonly" placeholder="电话" name="emergPhone"
              required>
          </label>
        </div>
        <div class="form-group">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：</label>
          <label>
            <input type="text" class="form-control" readonly="readonly" placeholder="" name="remark" required>
          </label>
        </div>
      </div>
      <div class="col-sm-2 form-group">
        <div class="picture-container">
          <div class="picture">
            <img src="http://placehold.it/320x150" class="picture-src" id="wizardPicturePreview" title="" />
            <input type="file" id="wizard-picture">
          </div>
          <!-- <h6>修改图片</h6> -->
          <!-- <label (click)="updatePicture()">{{editPicture ? '修改' : '确认上传'}}</label> -->
          <p></p>
          <p></p>
        </div>
        <div class="form-group">
          <!-- <label>擅长领域或个人简介</label> -->
          <label>
            <!-- <input type="textarea" class="form-control" placeholder="擅长领域或个人简介" name="profile" required> -->
            <!-- <textarea id="text" style="height:100%" contenteditable="true"  class="form-control" placeholder="擅长领域或个人简介擅长领域或个人简介擅长领域或个人简介擅长领域或个人简介" name="profile"></textarea> -->
            <!-- <p contenteditable="true" class="form-p"> -->

            <!-- </p> -->
          </label>

        </div>
      </div>
      <div class="col-sm-12 col-sm-offset-1">
        <div class="form-group col-sm-offset-7">
          <label>
            <!-- [(visible)]="displayButton"  -->
            <button type="submit" id="back" style="width : 100px" class="btn btn-primary" (click)="doBack()">
              后退
            </button>
          </label>
          <label>
            <button type="submit" style="width : 100px" class="btn btn-primary div-hidden" (click)="doEdit()">
              修改信息
            </button>
          </label>
        </div>
      </div>
    </div>
  </div>
</body>